<?php
	// File title
	$fileTitle = metadata('file', array('Dublin Core', 'Title')) ? strip_formatting(metadata('file', array('Dublin Core', 'Title'))) : metadata('file', 'original filename');

	// Item title
	$item_id = metadata('file', 'item_id');
	$item = get_record_by_id('item', $item_id);
	set_current_record('item', $item);
	$itemTitleLink = metadata('item', array('Dublin Core', 'Title'));

$title = $itemTitleLink.", ".$fileTitle;

	// taille maximale des images
	$json=json_decode($file['metadata'], true);
	if (isset($json['video'])) {
		$fileImgWidth = $json['video']['resolution_x'];
		$fileImgHeight = $json['video']['resolution_y'];
	}

	// calcul id précédent, id suivant
	$files = $item->Files;
	$fileNumber = count($files);
	$previousId = null;
	$nextId = null;
	$currentId = metadata('file', 'id');

	$customGallery = custom_item_image_gallery(array('currentId'=>$currentId));

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title><?php echo $title; ?></title>
	<!-- LAYOUT TAB v 1.3.0 -->
	<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT ?>/themes/longitudes/css/jquery.ui.all.css" />
	<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT ?>/themes/longitudes/css/layout-default-latest.css" />
	<!--files show style-->
	<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT ?>/themes/longitudes/css/files-show.css" />
	<!-- LAYOUT v 1.3.0 -->
	<script type="text/javascript" src="<?php echo WEB_ROOT ?>/themes/longitudes/javascripts/jquery-latest.js"></script>
	<script type="text/javascript" src="<?php echo WEB_ROOT ?>/themes/longitudes/javascripts/jquery-ui-latest.js"></script>
	<script type="text/javascript" src="<?php echo WEB_ROOT ?>/themes/longitudes/javascripts/jquery.layout-latest.js"></script>
	<script type="text/javascript" src="<?php echo WEB_ROOT ?>/themes/longitudes/javascripts/debug.js"></script>
	<script type="text/javascript" src="<?php echo WEB_ROOT ?>/themes/longitudes/javascripts/layout-simple.js"></script>
	<!-- Rotation -->
	<script type="text/javascript" src="<?php echo WEB_ROOT ?>/themes/longitudes/javascripts/jQueryRotateCompressed.js"></script>
</head>

<body style="background-color:#DDDDDD;">

<!-- allowOverflow auto-attached by option: west__showOverflowOnHover = true -->
<div class="ui-layout-west">

	<!-- The following returns all of the files associated with an item. -->
	<?php if ((get_theme_option('Item FileGallery') == 1) && metadata('item', 'has files')): ?>
	<div id="itemfiles" class="element" style="float:left;">
    <?php echo $customGallery['html']; ?>
	</div>
	<?php endif; ?>
</div>

<div class="ui-layout-east">
	<div id="tabs_div">
		<div class="ui-layout-title"><?php echo $title; ?></div>
		<div class="ui-layout-content ui-widget-content ui-corner-bottom" style="border-top: 0; padding-bottom: 1em;">
			<div id="tab_1">
				<p><a href="<?php echo file_download_url($file); // plugin FileDownload ?>">Télécharger</a></p>
				<table class="meta-table">
					<tr><td class="meta-title">Fichier</td><td class="meta-value"><?php echo $file['original_filename']?></td></tr>
					<tr><td class="meta-title">Taille</td>
						<td class="meta-value">
							<?php echo number_format($file['size']*0.000977, 2).' Ko, ' ?>
							<?php if (isset($fileImgWidth)) echo $fileImgWidth.' px,';?>
							<?php if (isset($fileImgHeight)) echo $fileImgHeight.' px, ';?>
						</td>
					</tr>
					<?php if (isset($file['mime_type'])):?>
					<tr><td class="meta-title">Type</td><td class="meta-value"><?php echo $file['mime_type']?>,
						<?php echo $file['type_os']?></td></tr>
					<?php endif; ?>
				</table>
				<hr/>
				<?php
				$content=all_element_texts('file');
				if (!empty($content)) echo $content.'<hr/>';?>
				Citer ce document : <?php echo custom_file_citation($title);?>
			</div>
		</div>
	</div>
</div>

<div class="ui-layout-center">
	<?php
	// PDF, pas de bouton de navigation
	if($file['mime_type']=='application/pdf'):?>
	<object  width="100%" height="100%" data="<?php echo WEB_ROOT .'/files/original/'.$file['filename'] ?>" type="application/pdf">
		<embed src="<?php echo WEB_ROOT .'/files/original/'.$file['filename'] ?>" type="application/pdf" />
	</object>
	<?php endif ?>

	<?php
	// Image, boutons de navigation
	if($file['mime_type']=='image/jpeg'):?>
	<table class="item-file" style=""><tr>
		<td>
			<a href="<?php echo WEB_ROOT .'/files/original/'.$file['filename'] ?>">
			<img id="image-center"
			style="width:100%; display: block; margin: 0 auto;<?php if (isset($fileImgWidth)) echo 'max-width:'.$fileImgWidth.'px;';?>"
			src="<?php echo WEB_ROOT .'/files/original/'.$file['filename'] ?>"
			alt="<?php echo $file['original_filename']?>" title="<?php echo $file['original_filename']?>" />
			</a>
		</td>
		<td id="pane-control">
			<ul class="ul-pane-control">
				<?php
				foreach($files as $key=>$file){
					if (metadata($file, 'id') == $currentId)
					{
						if ($key-1 >= 0) $previousId = $files[$key-1]['id'];
						if ($key+1 < $fileNumber)	$nextId = $files[$key+1]['id'];
					}
				}
				?>
				<li class="button-pane-up">
					<?php if ($nextId != null):?><form action="<?php echo $nextId;?>"><?php endif ?>
						<button title="suivant">&gt;</button>
					<?php if ($nextId != null):?></form><?php endif ?>
				</li>
				<li class="button-pane-down">
					<?php if ($previousId != null):?><form action="<?php echo $previousId;?>"><?php endif ?>
						<button title="précédent">&lt;</button>
					<?php if ($previousId != null):?></form><?php endif ?>
				</li>
			</ul>
			<ul class="ul-pane-control">
				<li class="button-pane-up">
					<button onclick="myLayout.close('east')" title="fermer le panneau de droite">+</button>
				</li>
				<li class="button-pane-down">
					<button onclick="myLayout.open('east')" title="ouvrir le panneau de droite">-</button>
				</li>
			</ul>
			<ul class="ul-pane-control">
				<li class="button-pane-up"><button id="clockwise" title="rotation à doite">&raquo;</button></li>
				<li class="button-pane-down"><button id="countercw" title="rotation à gauche">&laquo;</button></li>
			</ul>

		</td>
		</tr>
	</table>
	<?php endif ?>
</div>

<script type="text/javascript">
var angle = 0;
$('#clockwise').on('click', function() {
    angle += 90;
  	$("#image-center").rotate({animateTo:angle});
});
$('#countercw').on('click', function() {
    angle -= 90;
    $("#image-center").rotate({animateTo:angle});
});
</script>

</body>
</html>